<template>
  <view class="migrate-box">
    <view class="pad-20">
      <uni-nav-bar :statusBar="true" :border="false" left-icon="back" background-color="transparent"
        @clickLeft="clickLeft">
        <view class="text-center w-100 nav-title">
          <view class="font-16 font-500 col-000-8">
            图案数据迁移
          </view>
        </view>
      </uni-nav-bar>
      
      <view class="content m-t-40">
        <view class="info-box">
          <view class="font-18 font-600 col-000-8">迁移说明</view>
          <view class="font-14 col-000-6 m-t-20">
            此工具将对现有图案数据进行以下处理：
          </view>
          <view class="font-14 col-000-6 m-t-8">
            1. 将 category 从对象格式 {key: "xxx"} 转换为字符串 "xxx"
          </view>
          <view class="font-14 col-000-6 m-t-8">
            2. 将 tags 从对象数组 [{key: "xxx"}] 转换为字符串数组 ["xxx"]
          </view>
          <view class="font-14 col-000-6 m-t-8">
            3. 将所有图案的 duration 设置为 60 秒
          </view>
        </view>
        
        <view class="result-box m-t-40" v-if="result">
          <view class="font-18 font-600 col-000-8">迁移结果</view>
          <view class="font-14 col-000-6 m-t-20">
            状态: <text :class="result.success ? 'success' : 'error'">{{ result.success ? '成功' : '失败' }}</text>
          </view>
          <view class="font-14 col-000-6 m-t-8" v-if="result.success">
            总计: {{ result.total }} 条
          </view>
          <view class="font-14 col-000-6 m-t-8" v-if="result.success">
            成功: {{ result.successCount }} 条
          </view>
          <view class="font-14 col-000-6 m-t-8" v-if="result.success">
            失败: {{ result.errorCount }} 条
          </view>
          <view class="font-14 col-000-6 m-t-8" v-if="!result.success">
            错误: {{ result.error }}
          </view>
        </view>
        
        <view class="log-box m-t-40" v-if="logs.length > 0">
          <view class="font-18 font-600 col-000-8">执行日志</view>
          <scroll-view class="log-content m-t-20" scroll-y>
            <view class="log-item" v-for="(log, index) in logs" :key="index">
              {{ log }}
            </view>
          </scroll-view>
        </view>
        
        <view class="btn-box m-t-40">
          <button 
            class="btn" 
            :disabled="loading" 
            @click="startMigrate"
          >
            {{ loading ? '迁移中...' : '开始迁移' }}
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      result: null,
      logs: []
    }
  },
  
  methods: {
    clickLeft() {
      uni.navigateBack({
        delta: 1
      })
    },
    
    async startMigrate() {
      // 确认对话框
      const confirmed = await new Promise((resolve) => {
        uni.showModal({
          title: '确认迁移',
          content: '此操作将修改数据库中所有图案数据，确定要继续吗？',
          success: (res) => {
            resolve(res.confirm)
          }
        })
      })
      
      if (!confirmed) {
        return
      }
      
      this.loading = true
      this.result = null
      this.logs = []
      
      try {
        this.addLog('开始迁移图案数据...')
        
        // 调用云函数
        const sandart = uniCloud.importObject('sandart')
        const result = await sandart.migratePatternData()
        
        this.result = result
        
        if (result.success) {
          this.addLog(`迁移完成！总计: ${result.total}, 成功: ${result.successCount}, 失败: ${result.errorCount}`)
          
          uni.showToast({
            title: '迁移成功',
            icon: 'success',
            duration: 2000
          })
        } else {
          this.addLog(`迁移失败: ${result.error}`)
          
          uni.showToast({
            title: '迁移失败',
            icon: 'none',
            duration: 2000
          })
        }
      } catch (error) {
        console.error('迁移异常:', error)
        this.addLog(`迁移异常: ${error.message}`)
        
        this.result = {
          success: false,
          error: error.message
        }
        
        uni.showToast({
          title: '迁移失败',
          icon: 'none',
          duration: 2000
        })
      } finally {
        this.loading = false
      }
    },
    
    addLog(message) {
      const time = new Date().toLocaleTimeString()
      this.logs.push(`[${time}] ${message}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.migrate-box {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  
  .content {
    width: 100%;
    
    .info-box,
    .result-box,
    .log-box {
      width: 100%;
      background: #FFFFFF;
      box-shadow: 0px 0px 8rpx 0px rgba(0, 0, 0, 0.08);
      border-radius: 16rpx;
      padding: 32rpx;
    }
    
    .success {
      color: #52c41a;
      font-weight: 600;
    }
    
    .error {
      color: #ff4d4f;
      font-weight: 600;
    }
    
    .log-content {
      width: 100%;
      max-height: 400rpx;
      background-color: #f5f5f5;
      border-radius: 8rpx;
      padding: 20rpx;
      
      .log-item {
        font-size: 24rpx;
        color: rgba(0, 0, 0, 0.65);
        line-height: 1.6;
        margin-bottom: 8rpx;
        font-family: monospace;
      }
    }
    
    .btn-box {
      width: 100%;
      
      .btn {
        width: 100%;
        height: 100rpx;
        background: #000000;
        border-radius: 16rpx;
        color: #ffffff;
        font-size: 32rpx;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        
        &[disabled] {
          background: rgba(0, 0, 0, 0.3);
        }
      }
    }
  }
}
</style>
